<template>
	<view class="page-container address-container">
		<view class="address-header">
			<view class="left">
				<text>当前城市</text>
			</view>
			<view class="right">
				<text>郑州市</text>
				<view class="icon-right">
					<image :src="$img_path('/home/icon-right.png')" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="address-search">
			<input class="input" type="text" placeholder="地址关键词" />
			<view class="close">
				<image :src="$img_path('/home/needs/icon-input-close.png')" mode="widthFix"></image>
			</view>
		</view>
		<view class="address-list">
			<view class="address-list-item" v-for="(item,index) in 10" :key="index">
				<view class="icon-address">
					<image :src="$img_path('/home/needs/icon-address.png')" mode="widthFix"></image>
				</view>
				<view class="content">
					<view class="title">
						<text>旭辉佳苑</text>
					</view>
					<view class="info">
						<text>100m内 | 二七区嵩山南路266号</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
.address-container {
	padding: 30rpx 22rpx;
	padding-bottom: 60rpx;
	background-color: #fff;
	min-height: 100vh;
}

.address-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	
	.left {
		font-weight: bold;
		font-size: 30rpx;
		color: #333333;
	}
	
	.right {
		display: flex;
		align-items: center;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
		
		.icon-right {
			width: 24rpx;
			height: 24rpx;
			margin-left: 8rpx;
		}
	}
}

.address-search {
	margin-top: 30rpx;
	position: relative;
	
	.input {
		height: 80rpx;
		padding: 20rpx 30rpx;
		padding-right: 90rpx;
		background: #EEEEEE;
		box-sizing: border-box;
		border-radius: 96rpx 96rpx 96rpx 96rpx;
		font-weight: 400;
		font-size: 28rpx;
		line-height: 80rpx;
	}
	
	.close {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
	}
}

.address-list {
	.address-list-item {
		padding: 26rpx 0;
		border-bottom: 2rpx solid #F5F5F5;
		display: flex;
		align-items: center;
		
		.icon-address {
			width: 29rpx;
			height: 40rpx;
		}
		
		.content {
			margin-left: 22rpx;
			flex: 1;
			
			.title {
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}
			
			.info {
				margin-top: 8rpx;
				font-weight: bold;
				font-size: 24rpx;
				color: #333333;
			}
		}
	}
}
</style>
